﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="kqlist.aspx.cs" Inherits="weixin.crm.kqlist" %>

<!DOCTYPE html>
<html lang="en" style="overflow: hidden;">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>打卡记录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" media="screen" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="css/jquery-2.1.0.min.js"></script>
    <script src="css/float.js"></script>
    <script type="text/javascript">
        $(function () {
            getdata();
        });
        function getdata() {
            $.ajax({
                url: "api.ashx?rnd=" + Math.random(),
                type: "POST",
                data: { Action: "getdakalist" },
                dataType: "json",
                success: function (data) {
                    if (data.success == true) {
                        var html = $("#tmpl").html();
                        var newData = [];
                        for (var i = 0; i < data.data.length; i++) {
                            var _time = new Date(data.data[i].time);
                            var _str = _time.getFullYear() + '年' + (_time.getMonth() + 1) + '月' + _time.getDate() + '日';
                            var _tstr = fix(_time.getHours(), 2) + ':' + fix(_time.getMinutes(), 2) + ':' + fix(_time.getSeconds(), 2) + (data.data[i].type == 0 ? '' : '<label data-path="' + data.data[i].path + '" onclick="showhide(this);">【手机】</label>');
                            var _old = newData[newData.length - 1] || {};
                            var item = {};
                            if (_old.time == _str) {
                                item = _old;
                                item.str += "|" + _tstr;
                            } else {
                                item = {};
                                item.week = data.data[i].week;
                                item.dname = data.data[i].dname;
                                item.name = data.data[i].name;
                                item.code = data.data[i].code;
                                item.time = _str;
                                item.str = _tstr;
                                newData.push(item);
                            }
                        }
                        $.each(newData, function (i, row) {
                            var arr = row.str.split('|').reverse();
                            var tmp = [];
                            for (var i = 0; i < arr.length; i++) {
                                if (i==0) {
                                    tmp.push('<tr><td rowspan="' + arr.length + '">' + row.time + '</td><td>' + arr[i] + '</td></tr>');
                                }
                                else {
                                    tmp.push('<tr><td>' + arr[i] + '</td></tr>');
                                }
                            }
                            $("#contain").append(html.replace("{color}", row.week == "1" ? "#FFFF00" : "#FFFFFF").replace("{dname}", row.dname).replace("{name}", row.name).replace("{code}", row.code).replace("{trs}", tmp.join('')));
                        });
                    }
                    else {
                        alert('打卡失败,' + data.info);
                    }
                },
                error: function () {
                    alert('打卡失败！');
                }
            });
        }
        function fix(num, length) {
            return ('' + num).length < length ? ((new Array(length + 1)).join('0') + num).slice(-length) : '' + num;
        }
        function showhide(obj) {
            var domain = '<%=weixin.crm.basepage.Domain%>';
            var td = $(obj).closest('table').find('.prew');
            td.find("img").attr("src", domain+$(obj).attr("data-path"));
            td.toggle();
        }
    </script>
    <style>
        .item {
            width: 95%;
            height: auto;
            background-color: #fff;
            z-index: 9999;
            position: relative;
            margin-bottom:20px;
            /*border-radius:10px;*/
            cursor:pointer;
            display: inline-block;
            /*border:solid 1px #ccc;
            overflow:hidden;*/
        }
        .item img{
            width: 100%;
            height: 230px;
        }
        .item span{
            width: 100%;
            text-align:center;
            display: block;
            font-weight: bold;
            margin-top:10px;
        }
        .table{width:100%;}
        .table td{border:1px solid #ccc;height:33px;line-height:33px;text-align:center;width:50%;border-collapse: collapse;}
    </style>
    <script id="tmpl" type="text/html">
        <div class="item">
            <table class="table">
                <tr><td colspan="2" style="background-color:{color};">人员：{dname}-{name}&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
                {trs}
                <tr><td colspan="2" class="prew" style="display:none;"><img style="width:100%;height:auto;" alt="" src="" /></td></tr>
            </table>
        </div>
    </script>
</head>
<body style="overflow: hidden;">
    <div id="contain" style="overflow:auto;display:inline-block;width:100%;height:95%;padding:10px;"></div>
    <div id="particles-js">
        <div class="sk-rotating-plane"></div>
        <canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="1920" height="917"></canvas>
    </div>
</body>
</html>